<template>
  <div class="app-container">

    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-input
          v-model="queryParams.snId"
          clearable
          placeholder="请输入产品SN码进行查询"
          @clear="getList"
          @keyup.enter.native="getList">
        </el-input>
      </el-col>


      <el-col :span="6">
        <el-button
          icon="el-icon-search"
          @click="getList">
          查询
        </el-button>
      </el-col>


      <el-col :span="6">
        <el-button
          icon="el-icon-delete"
          plain
          type="danger"
          @click="deleteList">
          删除记录
        </el-button>
      </el-col>

      <el-col :span="6">
        <el-button
          icon="el-icon-download"
          plain
          type="warning"
          @click="handleExport">
          导出记录
        </el-button>
      </el-col>
    </el-row>


    <!--      信息表主体-->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column align="center" label="机器SN码" prop="snId"/>
      <el-table-column align="center" label="维修记录" prop="maintainRecord"/>
      <el-table-column align="center" label="维修人" prop="maintainMan"/>
      <el-table-column align="center" label="维修网点" prop="maintainPoint">
        <template slot-scope="scope">
          <span v-if="scope.row.maintainPoint === 1">黄石工厂</span>
          <span v-else>其它网点</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="寄回单号" prop="sendBackNumber"/>
      <el-table-column align="center" label="机器状态" prop="machineCondition">
        <template slot-scope="scope">
          <span v-if="scope.row.machineCondition === 3">已发货</span>
          <span v-else-if="scope.row.machineCondition === 6">已入库</span>
          <span v-else>未知状态</span>
        </template>
      </el-table-column>

      <!-- 详情按钮 -->
      <el-table-column align="center" label="订单详情">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="showDetailsDialog(scope.row)">
            详情查询
          </el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" label="完成时间" prop="operateTime" width="200px">
        <template slot-scope="scope">
          {{ formatDate(scope.row.operateTime) }}
        </template>
      </el-table-column>

    </el-table>


    <!-- 维修详情弹窗 -->
    <el-dialog
      :visible.sync="detailsDialogVisibleWeixiu"
      width="500px">
      <span slot="title" class="custom-dialog-title">详细信息</span>

      <el-form ref="detailsForm" :model="detailsFormWeixiu" label-width="100px">

        <el-form-item label="客户名称">
          <el-input v-model="detailsFormWeixiu.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="detailsFormWeixiu.brand" disabled></el-input>
        </el-form-item>
        <el-form-item label="尺寸">
          <el-input v-model="detailsFormWeixiu.size" disabled></el-input>
        </el-form-item>
        <el-form-item label="机型">
          <el-input v-model="detailsFormWeixiu.machineType" disabled></el-input>
        </el-form-item>
        <el-form-item label="具体现象">
          <el-input v-model="detailsFormWeixiu.phenomenon" disabled></el-input>
        </el-form-item>
        <el-form-item label="附件状况">
          <el-input v-model="detailsFormWeixiu.attachStatus" disabled></el-input>
        </el-form-item>
        <el-form-item label="返回地区">
          <el-input v-model="detailsFormWeixiu.backLocation" disabled></el-input>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-input v-model="detailsFormWeixiu.manuDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="退回日期">
          <el-input v-model="detailsFormWeixiu.backDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="detailsFormWeixiu.count" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际故障">
          <el-input v-model="detailsFormWeixiu.brokedown" disabled></el-input>
        </el-form-item>
        <el-form-item label="不良原因">
          <el-input v-model="detailsFormWeixiu.badReason" disabled></el-input>
        </el-form-item>
        <el-form-item label="解决方法">
          <el-input v-model="detailsFormWeixiu.resolveMethod" disabled></el-input>
        </el-form-item>
        <el-form-item label="责任归属">
          <el-input v-model="detailsFormWeixiu.responsibility" disabled></el-input>
        </el-form-item>
        <el-form-item label="其它配件">
          <el-input v-model="detailsFormWeixiu.other" disabled></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisibleWeixiu = false">关闭</el-button>
      </div>
    </el-dialog>


    <!-- 翻新详情弹窗 -->
    <el-dialog
      :visible.sync="detailsDialogVisibleFanxin"
      width="500px">
      <span slot="title" class="custom-dialog-title">详细信息</span>

      <el-form ref="detailsForm" :model="detailsFormFanxin" label-width="100px">

        <el-form-item label="原SN值">
          <el-input v-model="detailsFormFanxin.oldSnId" disabled></el-input>
        </el-form-item>
        <el-form-item label="现SN值">
          <el-input v-model="detailsFormFanxin.newSnId" disabled></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="detailsFormFanxin.brand" disabled></el-input>
        </el-form-item>
        <el-form-item label="机型">
          <el-input v-model="detailsFormFanxin.machineType" disabled></el-input>
        </el-form-item>
        <el-form-item label="料号">
          <el-input v-model="detailsFormFanxin.materialCondition" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="detailsFormFanxin.count" disabled></el-input>
        </el-form-item>
        <el-form-item label="机器尺寸">
          <el-input v-model="detailsFormFanxin.size" disabled></el-input>
        </el-form-item>
        <el-form-item label="附件状况">
          <el-input v-model="detailsFormFanxin.attachStatus" disabled></el-input>
        </el-form-item>
        <el-form-item label="配件详情">
          <el-input v-model="detailsFormFanxin.partsDetail" disabled></el-input>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-input v-model="detailsFormFanxin.manuDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="退回日期">
          <el-input v-model="detailsFormFanxin.backDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="缺料记录">
          <el-input v-model="detailsFormFanxin.shortageRecord" disabled></el-input>
        </el-form-item>
        <el-form-item label="责任归属">
          <el-input v-model="detailsFormFanxin.responsibility" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际故障">
          <el-input v-model="detailsFormFanxin.brokedown" disabled></el-input>
        </el-form-item>
        <el-form-item label="处理方式">
          <el-input v-model="detailsFormFanxin.resolveMethod" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="detailsFormFanxin.remarkInformation" disabled></el-input>
        </el-form-item>
        <el-form-item label="翻新时间">
          <el-input v-model="detailsFormFanxin.finishTime" disabled></el-input>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisibleFanxin = false">关闭</el-button>
      </div>
    </el-dialog>


    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>


<script>
import {
  getShouhouRecordList,
  deleteRecord
} from "@/api/Empment/shouhourecord";
import {MessageBox, Message} from 'element-ui';
import {delResignation_record} from "@/api/Empment/resignation_record";

export default {
  name: "EpmShouhouRecord",
  data() {
    return {
      tableData: [],
      loading: false,
      total: 0,
      selectedIds: [], // 用于存储选中的记录的 ID
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        snId: "",
      },


      // 显示详细数据表单
      detailsDialogVisibleWeixiu: false, // 控制维修详情弹窗的显示
      detailsFormWeixiu: {
        name: "",
        brand: "",
        size: null,
        machineType: "",
        phenomenon: "",
        attachStatus: "",
        backLocation: "",
        backDate: null,
        manuDate: null,
        count: null,
        brokedown: "",
        badReason: "",
        resolveMethod: "",
        responsibility: "",
        other: "",
      },

      // 显示详细数据表单
      detailsDialogVisibleFanxin: false, // 控制翻新详情弹窗的显示
      detailsFormFanxin: {
        oldSnId: "",
        newSnId: "",
        brand: "",
        machineType: "",
        materialCondition: "",
        count: null,
        size: null,
        attachStatus: "",
        partsDetail: "",
        backDate: null,
        manuDate: null,
        shortageRecord: "",
        responsibility: "",
        brokedown: "",
        resolveMethod: "",
        remarkInformation: "",
        finishTime: null,

      },


    };
  },


  methods: {
    // 加载数据
    getList() {
      this.fetchData();
    },
    fetchData() {
      this.loading = true;
      getShouhouRecordList(this.queryParams)
        .then(response => {
          this.tableData = response.rows;
          this.loading = false;
          this.total = response.total;
        })
        .catch(error => {
          console.error("加载数据时出现错误:", error);
          this.loading = false;
        });
    },


    // 格式化时间
    formatDate(isoDate) {
      if (!isoDate) return ""; // 处理空日期
      const date = new Date(isoDate);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },


    // 将选中的记录的 ID 存入 selectedIds 数组
    handleSelectionChange(val) {
      this.selectedIds = val.map(item => item.id)
      this.single = val.length !== 1
      this.multiple = !val.length
    },

    // 批量删除数据
    deleteList() {
      if (this.selectedIds.length === 0) {
        // 如果没有选中任何记录，提示用户
        Message.warning('请先选择要删除的记录');
        return;
      }


      // 确认删除
      MessageBox.confirm('此操作将永久删除选中记录, 请在删除前做好导出备份', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用 API 执行删除
        deleteRecord(this.selectedIds).then(response => {
          if (response.code === 200) {
            Message.success('删除成功');
            this.getList(); // 删除后重新加载列表
          } else {
            Message.error('删除失败，请稍后重试');
          }
        }).catch(error => {
          console.error("删除时出现错误:", error);
          Message.error('删除失败，请稍后重试');
        });
      }).catch(() => {
        Message.info('已取消删除');
      });
    },


    /** 导出按钮操作 */
    handleExport() {
      // 创建格式化时间函数
      const formatDate = (date) => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0') // 月份补零
        const day = String(date.getDate()).padStart(2, '0')          // 日期补零
        const hours = String(date.getHours()).padStart(2, '0')       // 小时补零
        const minutes = String(date.getMinutes()).padStart(2, '0')   // 分钟补零
        const seconds = String(date.getSeconds()).padStart(2, '0')   // 秒数补零

        // 格式示例：20231023_153045 (年月日_时分秒)
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      this.download('/Empment/shouhou/record/export', {
        ...this.queryParams
      }, `售后记录_${formatDate(new Date())}.xlsx`) // 使用格式化时间
    },


    // 详情查询
    showDetailsDialog(row) {
      if (row.machineCondition === 3) {
        this.detailsFormWeixiu = {
          ...row,
          manuDate: this.formatDate(row.manuDate), // 格式化生产日期
          backDate: this.formatDate(row.backDate)  // 格式化退回日期
        };
        this.detailsDialogVisibleWeixiu = true; // 打开维修详情弹窗
      } else if (row.machineCondition === 6) {
        this.detailsFormFanxin = {
          ...row,
          manuDate: this.formatDate(row.manuDate), // 格式化生产日期
          backDate: this.formatDate(row.backDate),  // 格式化退回日期
          finishTime: this.formatDate(row.finishTime) // 格式化翻新完成日期
        };
        this.detailsDialogVisibleFanxin = true; // 打开翻新详情弹窗
      } else {
        this.$message.warning("无效状态"); // 提示无效状态
      }
    }


  },

  mounted() {
    this.fetchData(); // 组件挂载后加载数据
  }
};
</script>


